/* 头部 */
.header{
    background-color:#111111;
    //background-color:transparent;
    //padding:1em 0em;
    position: sticky;
    top:0;
    left:0;
    width:100%;
    z-index:100000;

    transition:all linear .4s;

    .navbar{
        
        background-color:transparent;
        border:0px;
        border-radius: 0px;
        margin: 0;

        .navbar-brand{
            line-height: 30px;
            color:#fff;
            text-transform: uppercase;
            font-family: OSBold;
        }

        .nav{
            a{
                line-height: 30px;
                height: 60px;
                color:#fff;
                text-transform: uppercase;
                border-bottom:3px solid transparent;
                transition:all linear .3s;

                &:hover{
                    border-bottom:3px solid #fcac45;
                }
            }
        }
    }
 

    @media screen and (max-width:768px){
        &{
            background-color:#111111;
            .navbar{
                .nav{
                    a{
                        text-align: center;
                    }
                }
            }
        }
        
    }
}

// foot
.foot{
    width: 100%;
    height: auto;
    background-color: black;
    .item{
        margin: 0 auto;
        width: 80%;
        height: auto;
         line-height: 100px;
        //  border: #45fc8b 2px solid;
         display: flex;
         justify-content: space-between;
        .one{
            // border: #fcac45 2px solid;
            width: 50%;
            height: 100%;
            .right{ 
                    font-family: OSLight;
                    color:#b2b2b2;
                    font-size:1.2em;
                    text-transform: uppercase;
                    font-weight: bold;
                    span{
                        font-family: OSBold;
                    }
            }
            .left{
                width: 60%;
                display: flex;
                justify-content: space-evenly;
                margin: 0 auto;
                img{
                    display: inline-block;
                    width: 40px;
                    height: 40px;
                    border: 3px #999999 solid;
                    border-radius: 50%;
                    transition: all .3s linear;
                }
                img:hover{
                transform:translateY(-10px);
                box-shadow: 0px 0px 10px 0px #c3c3c3;
            }
            }
        }
    }
}

//up
.up{
    width: 70px;
    height: 70px;
    position: fixed;
    bottom: 45px;
    right: 45px;
    a{
        width: 100%;
        height: 100%;  
    }
   
    a:hover {
        animation: up 1s;
    }
    @keyframes up {
        from {
          transform: scale3d(1, 1, 1);
        }
      
        30% {
          transform: scale3d(1.25, 0.75, 1);
        }
      
        40% {
          transform: scale3d(0.75, 1.25, 1);
        }
      
        50% {
          transform: scale3d(1.15, 0.85, 1);
        }
      
        65% {
          transform: scale3d(.95, 1.05, 1);
        }
      
        75% {
          transform: scale3d(1.05, .95, 1);
        }
      
        to {
          transform: scale3d(1, 1, 1);
        }
      }
}

// 媒体查询
@media screen and (max-width:1020px){
    .foot{
        .item{
            text-align: center;
            justify-content: center;
            flex-direction: column;
            line-height: 60px;
            padding:30px 0 ;
            width: 95%;
            .one{
                width: 100%;
                .left{
                    width: 100%;
                }
            }
        }
    }
}
@media screen and (max-width:700px){
.foot{
     .item {
         .one {
             .right{
                 font-size: 1em;
             }
         }
     }
} 
}
@media screen and (max-width:768px){
    .header{
        &{
            .navbar{
                .container{
                    .collapse{
                        .nav{
                            li{
                                // overflow:hidden hidden;
                                text-align: center;
                                a{
                                    width: 100%;
                                    text-align: center;
                                }
                            }
                        }
                    }
                }
            }
        }
        }
        
}
@media screen and (max-width:420px){
    .up {
        width: 63px;
        height: 64px;
        position: fixed;
        bottom: 36px;
        right: 36px;
    }
}
@media screen and (max-width:350px){
    .foot .item .one .left img {
        width: 35px;
        height: 35px;
    }
}